<template>
    <div>
        <!-- 新增弹出框 -->
        <el-dialog title='新增' :visible.sync='addVisible' width='30%'>
            <el-form ref='addForm' :rules='addRule' :model='addForm' label-width='120px'>
                <el-form-item label='上级菜单ID：' prop='pMenu' v-if='false'>
                    <el-input v-model='addForm.pMenu' type='text'></el-input>
                </el-form-item>
                <el-form-item label='上级菜单名称：' prop='pMenuName' >
                    <el-input v-model='addForm.pMenuName' type='text' :disabled='true'></el-input>
                </el-form-item>
                <el-form-item label='菜单名称：' prop='mName'>
                    <el-input v-model='addForm.mName' type='text'></el-input>
                </el-form-item>
                <el-form-item label='菜单URL：' prop='mUrl'>
                    <el-input v-model='addForm.mUrl' type='text'></el-input>
                </el-form-item>
                <el-form-item label='排序：' prop='mSort'>
                    <el-input v-model='addForm.mSort' type='number'></el-input>
                </el-form-item>
                <el-form-item label='菜单描述：' prop='mDesc'>
                    <el-input v-model='addForm.mDesc' type='text'></el-input>
                </el-form-item>
                <el-form-item label='菜单图标：' prop='mIcon'>
                    <el-input v-model='addForm.mIcon' type='text'></el-input>
                </el-form-item>

            </el-form>
            <span slot='footer' class='dialog-footer'>
                        <el-button @click='addVisible = false'>取 消</el-button>
                        <el-button type='primary' @click="saveAdd('addForm')">确 定</el-button>
                    </span>
        </el-dialog>

    </div>
</template>

<script>
export default {
    name: 'addMenu',
    data() {
        //校验是否为正整数
        const validatorNumber = (rule, value, callback) => {
            if (!value) {
                callback();
            } else if (!/^[0-9]*[1-9][0-9]*$/.test(value)) {
                callback(new Error('请输入正整数'));
            } else {
                callback();
            }
        };
        return {
            //校验规则
            addVisible:false,
            addRule: {
                pMenuName: [{ required: true, message: '请输入父级菜单名称', trigger: 'change' }],
                mName: [{ required: true, message: '请输入菜单名称', trigger: 'change' },
                    { min: 0, max: 35, message: '长度在 0 到 35 个字符', trigger: 'blur' }],
                mUrl: [{ required: true, message: '请输入菜单URL', trigger: 'change' },
                    { min: 0, max: 35, message: '长度在 0 到 35 个字符', trigger: 'blur' }],
                mSort: [{ required: true, message: '请输入排序', trigger: 'change' },
                    { validator: validatorNumber, trigger: 'blur' }]
            },
            addForm: {
                pMenu: '',
                pMenuName: '',
                mName: '',
                mUrl: '',
                mSort: '',
                mDesc: '',
                mIcon: ''
            }//新增表单
        };
    },
    methods:{
        //初始化表单
        init(id) {
            //初始化清除表单验证
            // this.$nextTick(() => {
            //     this.$refs['addForm'].resetFields();
            // });
            this.addForm = {},
                this.$nextTick(() => {
                    this.$refs['addForm'].clearValidate();
                }),
                //获取节点信息
                this.$http.get('/authserver/menuController/findMenuById.json?id=' + id).then(res => {
                    if (res.data.status) {
                        console.log(res.data.data);
                        this.addForm.pMenu = res.data.data.mId;
                        this.addForm.pMenuName = res.data.data.mName;
                        this.addVisible = true;
                    }
                });
        },
        //保存新增
        saveAdd(addForm) {
            this.$refs[addForm].validate((valid) => {
                if (valid) {
                    this.addVisible = false;//隐藏编辑框
                    console.log(this.addForm);
                    this.$http.post('/authserver/menuController/addMenu.json', this.addForm).then(res => {
                        if (res.data.status) {
                            this.$message.success(res.data.msg);
                            this.$emit('init-menu-table',null);
                        }
                        this.addForm = {};
                    });
                }
            });
        }
    }
};
</script>

<style scoped>

</style>
